<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8"/>
    <title>找回密码</title>
    <style>
        .body_class {
            background-image: url("img/img_2.png");
            height: 100%;
            background-size: 100%;
            display: flex;
            flex-direction: row;
            align-items: center; /*纵向居中*/
            justify-content: center; /*横向居中*/
        }

        .main_div {
            height: 250px;
            width: 400px;
            background-color: bisque;
            border-radius: 10px;
            display: flex;
            flex-direction: column; /*水平排列*/
            align-items: center; /*纵向居中*/
        }

        .title_span {
            margin-top: 30px;
            font-size: 20px;
            font-family: 楷体;
            text-shadow: 2px 2px 2px #f552ff;
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-left: -19px;
        }

        .title_span1 {
            margin-top: 20px;
            font-size: 20px;
            font-family: 楷体;
            text-shadow: 2px 2px 2px #f552ff;
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-left: -19px;
        }
    </style>
    <script src="js/jquery.js"></script>
    <script>
        /**
         * 找回密码
         */
        function findPassword(btn) {
            //获得用户账号
            var username = $("#username").val();

            //校验
            if (username == null || username.trim() == "") {
                //用户名为空
                alert("用户名不能为空！");
                return;
            }

            //禁用按钮 - 表示邮件已经发送
            btnDisTime(btn);

            //通过ajax 请求后端发送短信
            $.ajax({
                type: "POST",
                url: "http://localhost:8080/user/sendEmailCode",
                data: {
                    username: username
                },
                success: function (data) {
                    if (data == 1) {
                        // alert("邮件发送成功");
                    } else if (data == -1) {
                        alert("账号不存在！");
                        //按钮恢复
                        $(btn).removeAttr("disabled");
                        $(btn).html("发送邮件");
                        //关闭定时器
                        clearTimeout(mytimeout);

                    } else if (data == -2) {
                        // alert("邮件发送失败！");
                    }
                }
            });
        }

        /**
         * 按钮禁用的倒计时
         */
        var time = 60;
        var mytimeout = null;

        function btnDisTime(btn) {
            $(btn).attr("disabled", "disabled");
            //改变按钮的内容
            $(btn).html("邮件已发送...(" + time + ")");
            //开启定时器
            mytimeout = setTimeout(function () {
                //时间扣减
                time--;
                if (time > 0) {
                    btnDisTime(btn);
                } else {
                    //结束递归
                    //按钮恢复
                    $(btn).removeAttr("disabled");
                    $(btn).html("发送邮件");
                    time = 60;
                }
            }, 1000);
        }

        //重置密码
        function updatePassword() {
            var username = $("#username").val();
            var newpassword = $("#password").val();
            var code = $("#code").val();
            //发送ajax
            $.ajax({
                type: "POST",
                url: "http://localhost:8080/user/updatePassword",
                data: {
                    username: username,
                    newpassword: newpassword,
                    code: code
                },
                success: function (data) {
                    if (data == 1) {
                        alert("密码重置成功")
                        location.href = "index.html"
                    } else if (data == -1) {
                        alert("验证码无效或已过期")
                    } else if (data == -2) {
                        alert("验证码错误")
                    }
                }
            });
        }
    </script>
</head>
<body class="body_class">
<div class="main_div">
    <span class="title_span" style="margin-top: 10px">五子棋游戏</span>
    <div style="margin-top: 20px">
        账号：<input id="username" placeholder="请输入账号"/>
        <button id="" onclick="findPassword(this)">发送邮件</button>
    </div>
    <div style="margin-top: 20px;margin-left: -45px">
        重置密码：<input id="password" placeholder="请输入新密码"/>
    </div>
    <div style="margin-top: 20px;margin-left: -55px">
        验证码：<input id="code" placeholder="请输入验证码"/>
    </div>
    <div class="title_span1">
        <button onclick="updatePassword()" style="margin-top: 20px ;">重置密码</button>
    </div>
</div>
</body>
</html>
